<template>
	<view>
		<tn-nav-bar :isBack='true' :backTitle='" "' :bottomShadow='false' :alpha="alpha">我的收藏</tn-nav-bar>
		<image src="/static/product/topbg.png" class="topbg" mode=""></image>
		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}" class="con">
			<tn-sticky :customNavHeight='vuex_custom_bar_height'>
				<view class="tabs" :style="{background:!alpha?'#fff':''}">
					<tn-tabs :list="list" :current="current" itemWidth='50%' activeColor="#1E1E1E"
						inactiveColor="#868A8B" :barWidth='32' :barHeight='11'
						:barStyle="{background:'#45C47B',marginTop:'10rpx'}" :height='80' @change="change"
						:isScroll='false' :fontSize="28" :bold='true'></tn-tabs>
				</view>
			</tn-sticky>
			<loading v-if="loading"></loading>
			<view class="list" v-else>
				<view class="tn-flex tn-flex-col-center tn-flex-row-between tn-flex-wrap" v-if='current==0'>
					<project-item v-for="(item,index) in plist" :item="item" :key='index'></project-item>
				</view>
				<view class="tn-flex tn-flex-col-center tn-flex-row-between tn-flex-wrap" v-if='current==1'>
					<view class="" v-for="(item,index) in plist" :key="'product'+index" @click="to('/pages/product/details?id='+item.id+'&type=3')">
						<product-item :item='item'></product-item>
					</view>
				</view>
			</view>
			<view class="tn-safe-area-inset-bottom">

			</view>
		</view>
	</view>
</template>

<script>
	import user from '@/api/_user.js'
	export default {
		data() {
			return {
				list: [{
					name: '旅游',
					status: 1
				}, {
					name: '套餐',
					status: 3
				}],
				status: 1,
				current: 0,
				alpha: true,
				plist: [],
				loading:true
			};
		},
		methods: {
			change(index) {
				this.current = index;
				this.status = this.list[index].status
				this.getlist()
			},
			getlist() {
				this.loading=true
				user.myCollect({
					type: this.status
				}).then(res => {
					if (res.data.code == 1) {
						res.data.data.map(t => {
							t.imgs = t.images.split(',').filter(Boolean)
						})
						this.plist = res.data.data
						this.loading=false
					}
				})

			}
		},
		onLoad() {
			this.getlist()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4F4F4;
	}

	.tabs {
		border-top: 2rpx solid #F4F6F8;
		padding: 10rpx 0;
	}

	.con {
		position: relative;
	}

	.list {
		padding: 0 24rpx;


	}
</style>